import React, { Component } from 'react';
import './MusicType.scss';

class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
        mvlist: [],
        amlist: [],
        bmlist: [],
        cmlist: [],
        dmlist: [],
        emlist: [],
        fmlist: [],
      }
      
    }



    componentDidMount  () {
        fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=我喜欢上你内心时的活动&type=song&limit=4&offset=2')
            .then(res => res.json())
            .then(data => {
                // console.log(data)
                this.setState({
                    mvlist: data.data
                })
            })
    

            fetch('https://api.bzqll.com/music/tencent/hotMvList?key=579621905&year=0&tag=0&area=0&limit=4&offset=0')
                .then(res => res.json())
                .then(data => {
                    // console.log(data)
                    this.setState({
                        amlist: data.data
                    })
                })
            
            fetch('https://api.bzqll.com/music/tencent/hotMvList?key=579621905&year=0&tag=0&area=0&limit=4&offset=1')
                .then(res => res.json())
                .then(data => {
                    // console.log(data)
                    this.setState({
                        bmlist: data.data
                    })
                })

            fetch('https://api.bzqll.com/music/tencent/hotMvList?key=579621905&year=0&tag=0&area=0&limit=4&offset=2')
                .then(res => res.json())
                .then(data => {
                    // console.log(data)
                    this.setState({
                        cmlist: data.data
                    })
                })
            fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=我喜欢上你内心时的活动&type=song&limit=4&offset=4')
                .then(res => res.json())
                .then(data => {
                    // console.log(data)
                    this.setState({
                        dmlist: data.data
                    })
                })
                
            fetch('https://api.bzqll.com/music/tencent/hotMvList?key=579621905&year=0&tag=0&area=0&limit=4&offset=7')
                .then(res => res.json())
                .then(data => {
                    // console.log(data)
                    this.setState({
                        emlist: data.data
                    })
                })

            fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=我喜欢上你内心时的活动&type=song&limit=4&offset=3')
                .then(res => res.json())
                .then(data => {
                    // console.log(data)
                    this.setState({
                        fmlist: data.data
                    })
                })
        
            }

    
  
    render () {
      return (
        <div className="box">
            <div className="m-type">
                <p className="n-type">最新上架</p>
                <ul>
                    {
                        this.state.mvlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></ div>
                                <p>{item.name}</p>
                                <p>{item.singer}</p>
                                <p>￥{item.time}</p>
                                <span>立即购买</span>
                            </li>
                            )
                        })
                    }
                    
                </ul>
            </div>
            <div className="m-type">
                <p className="n-type">本周热销</p>
                <ul>
                {
                        this.state.amlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></ div>
                                <p>{item.name}</p>
                                <p>{item.singer}</p>
                                <p>￥6</p>
                                <span>立即购买</span>
                            </li>
                            )
                        })
                }

                </ul>
            </div>
            <div className="m-type">
                <p className="n-type">音乐人专区</p>
                <ul>
                {
                        this.state.bmlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></ div>
                                <p>{item.name}</p>
                                <p>{item.singer}</p>
                                <p>￥6</p>
                                <span>立即购买</span>
                            </li>
                            )
                        })
                }

                </ul>
            </div>
            <div className="m-type">
                <p className="n-type">华语乐坛  流行精选</p>
                <ul>
                {
                        this.state.cmlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></ div>
                                <p>{item.name}</p>
                                <p>{item.singer}</p>
                                <p>￥6</p>
                                <span>立即购买</span>
                            </li>
                            )
                        })
                }
                </ul>
            </div>
            <div className="m-type">
                <p className="n-type">欧美大咖 热单鉴赏</p>
                <ul>
                {
                        this.state.dmlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></ div>
                                <p>{item.name}</p>
                                <p>{item.singer}</p>
                                <p>￥6</p>
                                <span>立即购买</span>
                            </li>
                            )
                        })
                }
                </ul>
            </div>
            <div className="m-type">
                <p className="n-type">港台大牌  经典传唱</p>
                <ul>
                {
                        this.state.emlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></ div>
                                <p>{item.name}</p>
                                <p>{item.singer}</p>
                                <p>￥6</p>
                                <span>立即购买</span>
                            </li>
                            )
                        })
                }
                </ul>
            </div>
            <div className="m-type">
                <p className="n-type">韩剧原声  浪漫放送</p>
                <ul>
                {
                        this.state.fmlist.map((item, index) => {
                            return (
                            <li key={index}>
                                <div className="tu"><img src={item.pic} alt={item.pic}/></ div>
                                <p>{item.name}</p>
                                <p>{item.singer}</p>
                                <p>￥6</p>
                                <span>立即购买</span>
                            </li>
                            )
                        })
                }
                </ul>
            </div> 
        </div>
      )
    }
  }
  
  export default Com;